<template>
  <div class="instance-detail">
    <div class="page-header">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col>
          <div class="page-header-content">
            <div class="avatar">
              <img src="~@/assets/fight.svg" alt="">
            </div>
            <div class="content">
              <div class="content-title">
                {{ instanceDetail.instanceTitle }} <a v-if="!isSelf" style="font-size: 14px" href="javascript:void 0" @click="showApplyInstanceModal()">申请加入</a>
              </div>
              <div v-if="!isSelf">
                团战发起人： {{ instanceDetail.actorName }} <a :href="`/wall-breaker/#/member/${instanceDetail.actorId}`" target="_blank">看他的主页</a>
              </div>
              <div v-else>
                我发起的团战 <router-link to="/my/workbench">我的主页</router-link>
              </div>
            </div>
          </div>
        </a-col>
        <a-col>
          <div class="extra-content">
            <div class="stat-item">
              <a-statistic title="团战状态" :value="instanceDetail.instancStateDesc" />
            </div>
            <div class="stat-item">
              <a-statistic title="团战完成目标/总目标" :value="instanceDetail.missionDoneCount" :suffix="`/ ${instanceDetail.missionCount}`"/>
            </div>
            <div class="stat-item">
              <a-statistic title="团战完成结果/总结果" :value="instanceDetail.keyResultDoneCount" :suffix="`/ ${instanceDetail.keyResultCount}`"/>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <div>
      <a-row :gutter="24" type="flex">
        <a-col
          :xl="16"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24"
        >
          <a-card
            :loading="loading"
            :bordered="false"
            title="团战价值"
            style="margin-bottom: 24px"
          >
            <span v-html="instanceDetail.instanceValue"></span>
          </a-card>

          <a-card
            :loading="loading"
            :bordered="false"
            title="团战描述"
            style="margin-bottom: 24px"
          >
            <span v-html="instanceDetail.instanceContent"></span>
          </a-card>

          <!-- :bodyStyle="{ minHeight: isInTeam ? '600px' : '440px', overflow: 'auto' }" -->
          <a-card
            style="margin-bottom: 24px"
            :loading="loading"
            :bordered="false"
            :tab-list="tabList"
            @tabChange="key => activeKey = key"
          >
            <instance-message
              v-if="activeKey === 'message'"
              :logs="logs"
            />
            <instance-missions
              v-if="activeKey === 'missions'"
              :data-source="instanceDetail.missionList"
              @grade="showGradeMissionModal"
              :isInTeam="isInTeam"
            />
          </a-card>
        </a-col>

        <a-col
          style="padding: 0 12px"
          :xl="8"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24">
          <a-card
            title="团战成员指数"
            style="margin-bottom: 24px"
            :loading="loading"
            :bordered="false"
            :body-style="{ padding: 0 }">
            <div style="min-height: 400px;">
              <!-- :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts"  -->
              <radar :radarData="radarData" :members="members" />
            </div>
          </a-card>
          <a-card :loading="loading" title="团队成员" :bordered="false" style="margin-bottom: 24px">
            <div class="members">
              <a-row>
                <a-col :span="12" v-for="(item, index) in teams" :key="index">
                  <a href="/wall-breaker/#/member/1" target="_blank">
                    <a-avatar size="small" :src="item.avatar"/>
                    <span class="member">{{ item.name }}</span>
                  </a>
                </a-col>
              </a-row>
            </div>
          </a-card>
          <a-card
            title="变更状态"
            :loading="loading"
            v-if="loading||isSelf"
            :bordered="false"
          >
            <a-button-group>
              <a-button @click="showConfirm" data-state="NEW" :disabled="['DONE', 'ABANDONED','NEW'].indexOf(instanceDetail.instancState)>-1">撤回</a-button>
              <a-button @click="showConfirm" data-state="RECRUIT" :disabled="['DONE', 'ABANDONED','IN_PROGRESS'].indexOf(instanceDetail.instancState)>-1">招募</a-button>
              <a-button @click="showConfirm" data-state="IN_PROGRESS" :disabled="['DONE', 'ABANDONED','RECRUIT'].indexOf(instanceDetail.instancState)>-1">项目开始</a-button>
              <a-button @click="showConfirm" data-state="DONE" :disabled="['DONE', 'ABANDONED'].indexOf(instanceDetail.instancState)>-1">胜利</a-button>
              <a-button @click="showConfirm" data-state="ABANDONED" :disabled="['DONE', 'ABANDONED'].indexOf(instanceDetail.instancState)>-1">失败</a-button>
            </a-button-group>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <apply-instance-modal ref="applyInstanceModal" @finished="init" />
    <grade-mission-modal ref="gradeMissionModal" @finished="init" />
  </div>
</template>

<script>
// 组件
import ApplyInstanceModal from './modal/apply-instance'
import GradeMissionModal from './modal/grade-mission'
import Radar from './components/Radar'
import InstanceMessage from './components/InstanceMessage'
import InstanceMissions from './components/InstanceMissions'

// tools
import { makeUserIcon, makeRadarData } from '@/utils/mock'
import { mapGetters } from 'vuex'

// api
import { detail, update, instanceActor, changeLog } from '@/api/instance'

export default {
  data () {
    return {
      loading: true,
      // 团战详情
      instanceDetail: {
        missionList: []
      },

      tabList: [
        {
          key: 'message',
          tab: '动态'
        },
        {
          key: 'missions',
          tab: '任务列表'
        }
      ],
      activeKey: 'message',
      logs: [], // 日志
      radarData: [],
      teams: [],
      members: [],
      record: {
        id: 1
      }
    }
  },
  components: {
    ApplyInstanceModal,
    InstanceMessage,
    InstanceMissions,
    Radar,
    GradeMissionModal
  },
  computed: {
    ...mapGetters(['name', 'actorId']),
    isSelf () {
      return this.actorId === this.instanceDetail.actorId
    },
    isInTeam () {
      const ids = this.teams.map(team => (team.id))
      return ids.includes(this.actorId)
    }
  },
  methods: {
    // 获取团战详情
    async getDetail () {
      try {
        const { id } = this.$route.params
        const content = await detail(id)
        this.instanceDetail = content
        this.instanceDetail.missionList = content.missionList.filter(item => item !== null)
      } catch (error) {
        console.error(error)
      } finally {

      }
    },
    // 获取消息
    async getChangeLog () {
      try {
        const { instancId } = this.instanceDetail
        const content = await changeLog({
          instanceId: instancId
        })
        this.logs = content
        console.log(content)
      } catch (error) {

      } finally {

      }
    },
    // 获取团战成员
    async getTeams () {
      try {
        const content = await instanceActor({ instanceId: this.instanceDetail.instancId })
        this.teams = content.map(team => {
          return {
            id: team.id,
            name: team.name,
            avatar: makeUserIcon()
          }
        })
        console.log(this.teams)
        this.members = this.teams.map(team => (team.name))
        this.radarData = makeRadarData(this.members)
      } catch (error) {

      } finally {

      }
    },
    async init () {
      try {
        this.loading = true
        await this.getDetail()
        await Promise.all([this.getTeams(), this.getChangeLog()])
      } catch (error) {

      } finally {
        this.loading = false
      }
    },
    // 显示神器模块
    showApplyInstanceModal () {
      this.$refs.applyInstanceModal.show(this.instanceDetail)
    },
    // 显示状态
    showConfirm (event) {
      console.log(event)
      const { state } = event.target.dataset
      const { instancId } = this.instanceDetail
      const { init } = this

      this.$confirm({
        title: '状态改变',
        content: `确认是否改变到状态 ${event.target.innerText}`,
        onOk () {
          return update({
            id: instancId,
            state
          }).then(() => {
            init()
          }).catch(error => {
            console.error(error)
          }).finally(() => {

          })
        },
        onCancel () {}
      })
    },
    // 评分模块
    showGradeMissionModal (record) {
      this.$refs.gradeMissionModal.show(record)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less" scoped>
@import "../../components/customPageHeaderContent.less";

.page-header {
  margin-bottom: 24px;
  padding: 12px;
  background: #fff;
}

  .members {
    a {
      display: block;
      margin: 12px 0;
      line-height: 24px;
      height: 24px;

      .member {
        font-size: 14px;
        color: rgba(0, 0, 0, .65);
        line-height: 24px;
        max-width: 100px;
        vertical-align: top;
        margin-left: 12px;
        transition: all 0.3s;
        display: inline-block;
      }

      &:hover {
        span {
          color: #1890ff;
        }
      }
    }
  }
</style>
